<script>
import CopyTag from '@/components/CopyTag.vue'
import { useAppStore } from '@/stores/app'
import copy from 'copy-to-clipboard'
import { mapStores } from 'pinia'
import QRCode from 'qrcode'
import { Button, Toast } from 'vant'

export default {
  components: {
    Button,
    CopyTag
  },
  computed: {
    ...mapStores(useAppStore)
  },
  data() {
    return {
      qrcode: ''
    }
  },
  created() {
    this.generateQrcode()
  },
  methods: {
    async generateQrcode() {
      const origin = location.origin
      const params = new URLSearchParams({
        type: 'register',
        invitation_code: this.appStore.userInfo.invitationCode
      })
      const url = new URL(`/#/login?${params.toString()}`, origin)
      this.qrcode = await QRCode.toDataURL(url.href, {
        width: 550,
        height: 550
      })
    },
    copyInvitationCode() {
      if (copy(this.appStore.userInfo.invitationCode)) {
        Toast.success({ message: '复制成功' })
      }
    }
  },
}
</script>

<template>
  <div class="invite">
    <img class="qrcode" :src="qrcode" alt="">

    <div class="invite-text">长按保存或复制二维码发送给好友</div>
    <div class="invite-text">或点击复制下方邀请码</div>

    <div style="display: flex; justify-content: center; margin-top: 10px;">
      <CopyTag :text="appStore.userInfo.invitationCode" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.invite {
  .qrcode {
    width: 100%;
    height: 100%;
  }

  .invite-text {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }
}
</style>
